<template>
	<canvas v-if="drawing" style="position: absolute;z-index: -10;left:0;top:0" :style="{width:width,height: height}"
		id="canvas" canvas-id="canvas"></canvas>
</template>

<script>
	import QRCode from '@/Grace6/js/qrcode.js';
	export default {
		name: "hyb-poster",
		props: {
			width: {
				type: String,
				default: "200px"
			},

			height: {
				type: String,
				default: "300px"
			},

			bgColor: {
				type: String,
				default: "#fff"
			},


		},
		data() {
			return {
				context: null,
				drawing: false,
			};
		},


		methods: {
			getImageInfo(url) {
				return new Promise((resolve) => {
					uni.getImageInfo({
						src: url,
						success: (res) => {
							console.log(res);
							resolve(res);
						}
					})
				})
			},

			async make(items) {
				uni.showLoading({
					title: "生成中..."
				})
				this.drawing = true;



				for (let i = 0; i < items.length; i++) {
					if (items[i].type == "image") {
						// items[i].url = await this.downloadFile(items[i].url);
						items[i].url = await this.downloadFile(items[i].url);

						// if (items[i].width == undefined) {
						// 	let res = await this.getImageInfo(items[i].url);
						// 	items[i].width = parseInt(this.width);
						// 	items[i].height = res.height *  res.width /  items[i].width;
						// 	console.log(items[i]);
						// }
					}
				}




				return new Promise((resolve) => {
					setTimeout(() => {
						this.context = uni.createCanvasContext("canvas", this);
						this.context.setFillStyle(this.bgColor);
						this.context.fillRect(0, 0, parseFloat(this.width), parseFloat(this.height));
						items.forEach((item) => {
							if (item.type == "image") {
								if (item.circle) {
									this.context.save();
									this.context.beginPath();
									this.context.arc(item.x + item.width / 2, item.y + item
										.width /
										2, item.width / 2, 0, Math.PI *
										2, false);
									this.context.clip();
								}
								this.context.drawImage(item.url, item.x, item.y, item.width,
									item
									.height ? item.height : item.width);
								if (item.circle) {
									this.context.restore();
								}

							} else if (item.type == "text") {
								this.drawText(item.text, item.x, item.y, item.color ? item
									.color :
									'#000000', item.size ? item.size : 16, item
									.align ? item.align : 'left', item.bold);
							} else if (item.type == "qrcode") {
								this.drawQrcode(item.text, item.x, item.y, item.width);
							}
						})
						this.context.save();
						this.context.draw(true, () => {
							setTimeout(() => {
								uni.canvasToTempFilePath({
									x: 0,
									y: 0,
									width: parseInt(this.width),
									height: parseInt(this.height),
									destWidth: parseInt(this.width),
									destHeight: parseInt(this.height),
									canvasId: 'canvas',
									success: (res) => {
										// 在H5平台下，tempFilePath 为 base64
										let path = res.tempFilePath;
										this.drawing = false;
										uni.hideLoading();
										resolve(path)
									},
									fail: (err) => {
										this.drawing = false;
										uni.hideLoading();
									}
								}, this);
							}, 1000)
						});
					})
				}, 1000)

			},



			drawIt: function() {

			},


			// 绘制文本, 参数 : 文本内容,x,y,颜色,文本大小,横向对齐方式
			drawText: function(content, x, y, color, size, align, bold) {
				this.context.save();
				this.context.setFontSize(size);
				this.context.setFillStyle(color);
				this.context.setTextAlign(align);
				let count = 100;
				let row = Math.ceil(content.length / count);
				for (let i = 0; i < row; i++) {
					if (bold) {
						this.context.fillText(content, x, y - 0.5);
						this.context.fillText(content, x - 0.5, y);
					}
					this.context.fillText(content.substr(i * count, count), x, y + (i * 20));
				}
				this.context.restore();
			},


			drawQrcode(text, x, y, width, color) {
				let qrcode = new QRCode("", {
					text: text,
					width: width,
					height: width,
					colorDark: '#000000',
					colorLight: '#FFFFFF',
				});
				qrcode.paint(this.context, x, y)
			},



			downloadFile(url) {


				return new Promise((resolve) => {
					url = "https://xjz.cyygkj.cn/api/file/download?url=" + encodeURIComponent(url);
					// #ifdef H5
					resolve(url);
					// #endif

					// #ifdef MP
					uni.downloadFile({
						url: url,
						success: (res) => {
							resolve(res.tempFilePath)
						},
						fail: (err) => {
							uni.showToast({
								title: JSON.stringify(err),
								icon: "none"
							})
							resolve(url)
						}
					})
					// #endif
				})


			},

			// 绘制图片,参数 : 图片地址, 绘制完成后执行的回调函数
			async drawBGIMG(url, x, y, width, height) {
				let path = await this.downloadFile(url);
				if (path) {
					this.context.drawImage(res.tempFilePath, x, y, width, height);
				}
			}
		},
	}
</script>

<style>

</style>
